<template>
	<el-tabs v-model="activeName" @tab-click="handleClick">
		<el-tab-pane label="流失月报" name="first">
			<div>
				<el-row :gutter="24">
					<el-col :span="24">
						<div style="height: 0.5em;"></div>
					</el-col>
					<el-col :span="1">
						<p class="queryLabel">开始日期:</p>
					</el-col>
					<el-col :span="4">
						<el-date-picker size="small" v-model="timethird" format="yyyy-MM" :editable=false type="month" placeholder="开始日期">
						</el-date-picker>
					</el-col>
					<el-col :span="2" style="padding-left: 0px;text-align:right">
						<el-button type="primary" size="small" v-on:click='baseSecondQuery'>查询</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<!--
									描述：流失客户未进站原因分析
							-->
						
					<div class="report_Fixedwidth" v-loading="Loading">
			            <table class="report_table" id="dbcarback" cellspacing="0" style="width: 2300px;" cellpadding="0" width="100%">
			            	<tbody>
			            		<tr class="texttbody" height="60px;">
			            			<th scope="col" rowspan="3" style="width: 200px;">公司</th>
			            			<th scope="col"	rowspan="3">任务类型</th>
			            			<th scope="col" colspan="5">回访失败</th>
			            			<th scope="col" colspan="17">回访成功</th>
<!--			            			<th scope="col" rowspan="3" style="width: 80px;">合计</th>
-->			            		</tr>
			            		<tr class="texttbody" height="60px;">
			            			<th scope="col" rowspan="2" style="width: 100px;">空号或错号</th>
			            			<th scope="col" rowspan="2" style="width: 80px;">停机</th>
			            			<th scope="col" rowspan="2" style="width: 90px;">无人接听</th>
			            			<th scope="col" rowspan="2" style="width: 90px;">人员不符</th>
			            			<th scope="col" rowspan="2" style="width: 90px;">客户拒访</th>
			            			<th scope="col" colspan="3">持续跟进</th>
			            			<th scope="col" colspan="13">战败</th>
			            			
			            		</tr>
			            		<tr class="texttbody" height="60px">
			            			<th scope="col" style="width: 90px;">里程未到</th>
			            			<th scope="col" style="width: 90px;">时间未到</th>
			            			<th scope="col" style="width: 90px;">近期太忙</th>
			            			<th scope="col" style="width: 150px;">车辆转让或报废</th>
			            			<th scope="col" style="width: 90px;">人在外地</th>
			            			<th scope="col" style="width: 90px;">过路车</th>
			            			<th scope="col" style="width: 90px;">车很少用</th>
			            			<th scope="col" style="width: 90px;">非车主本人</th>
			            			<th scope="col" style="width: 90px;">外地车</th>
			            			<th scope="col" style="width: 90px;">维修质量</th>
			            			<th scope="col" style="width: 90px;">维修价格</th>
			            			<th scope="col" style="width: 90px;">维修效率</th>
			            			<th scope="col" style="width: 90px;">服务态度</th>
			            			<th scope="col" style="width: 90px;">服务环境</th>
			            			<th scope="col" style="width: 90px;">距离远</th>
			            			<th scope="col" style="width: 80px;">其他</th>
			            		</tr>
			            		<tr v-for="item in tableThirdData.dataList">
			            			<td>{{item.oName}}</td>
			            			<td>{{item.typeCode}}</td>
			            			<td>{{item.kshch}}</td>
			            			<td>{{item.tj}}</td>
			            			<td>{{item.wrjt}}</td>
			            			<td>{{item.rybf}}</td>
			            			<td>{{item.khjf}}</td>
			            			<td>{{item.lcwd}}</td>
			            			<td>{{item.sjwd}}</td>
			            			<td>{{item.jqtm}}</td>
			            			<td>{{item.clzrhbf}}</td>
			            			<td>{{item.rzwd}}</td>
			            			<td>{{item.glc}}</td>
			            			<td>{{item.chsy}}</td>
			            			<td>{{item.fczbr}}</td>
			            			<td>{{item.wdc}}</td>
			            			<td>{{item.wxzl}}</td>
			            			<td>{{item.wxjg}}</td>
			            			<td>{{item.wxxl}}</td>
			            			<td>{{item.fwtd}}</td>
			            			<td>{{item.fwhj}}</td>
			            			<td>{{item.jly}}</td>
			            			<td>{{item.qt}}</td>
			            		</tr>
			            	</tbody>
			            </table>
					</div>
					</el-col>
				</el-row>
			</div>
			
		</el-tab-pane>
		<el-tab-pane label="流失去向分析" name="second">
			<div>
				<el-row :gutter="24">
					<el-col :span="24">
						<div style="height: 0.5em;"></div>
					</el-col>
					<el-col :span="1">
						<p class="queryLabel">选择日期:</p>
					</el-col>
					<el-col :span="4">
						<el-date-picker size="small" v-model="times" format="yyyy-MM" :editable=false type="month" placeholder="开始日期">
						</el-date-picker>
					</el-col>
					<el-col :span="1">
						<p class="queryLabel">选择区域:</p>
					</el-col>
					<el-col :span="4">
						<el-select size="small" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
							<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
						</el-select>
					</el-col>
					<el-col :span="1">
						<p class="queryLabel">选择品牌:</p>
					</el-col>
					<el-col :span="4">
						<el-select size="small" v-model="brand" placeholder="请输入品牌名称" clearable @change="getCompanyInfo">
							<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
						</el-select>
					</el-col>
					<el-col :span="1">
						<p class="queryLabel">选择公司:</p>
					</el-col>
					<el-col :span="4">
						<el-select size="small" v-model="companyId" placeholder="请输入公司名称" clearable>
							<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
						</el-select>
					</el-col>
					<el-col :span="2">
						<el-button type="primary" size="small" v-on:click='baseQuerys'>查询</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div class="report_Fixedwidth" v-loading="Loading">
							<table class="report_table" cellpadding="0" cellspacing="0" width="100%">
								<tbody>
									<tr class="texttbody">
										<th scope="col">公司名称</th>
										<th scope="col">流失地点</th>
										<th scope="col">数量</th>
									</tr>
									<tr v-for="item in tableDatas.dataList">
										<td style="width: 33.3%;">{{item.oName}}</td>
										<td style="width: 33.3%;">{{item.resultD}}</td>
										<td style="width: 33.3%;">{{item.num}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-tab-pane>
		<el-tab-pane label="流失原因分析" name="forth">
			<div>
				<el-row :gutter="24">
					<el-col :span="24">
						<div style="height: 0.5em;"></div>
					</el-col>
					<el-col :span="1" >
						<p class="queryLabel">开始日期:</p>
					</el-col>
					<el-col :span="4">
						<el-date-picker size="small" v-model="timeForth" format="yyyy-MM" :editable=false type="month" placeholder="开始日期">
						</el-date-picker>
					</el-col>
					<el-col :span="1">
						<p class="queryLabel">区域:</p>
					</el-col>
					<el-col :span="4">
						<el-select size="small" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
							<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
						</el-select>
					</el-col>
					<el-col :span="1">
						<p class="queryLabel">品牌:</p>
					</el-col>
					<el-col :span="4">
						<el-select size="small" v-model="brand" placeholder="请输入品牌名称" clearable @change="getCompanyInfo">
							<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
						</el-select>
					</el-col>
					<el-col :span="1">
						<p class="queryLabel">公司:</p>
					</el-col>
					<el-col :span="4">
						<el-select size="small" v-model="companyId" placeholder="请输入公司名称" clearable>
							<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
						</el-select>
					</el-col>
					<el-col :span="2" style="padding-left: 0px;text-align:right">
						<el-button type="primary" size="small" v-on:click='baseForthQuery'>查询</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div class="report_Fixedwidth" v-loading="reasonLoading">
							<table class="report_table" cellpadding="0" cellspacing="0" width="100%">
								<tbody>
									<tr class="texttbody">
										<th scope="col">公司名称</th>
										<th scope="col">流失原因</th>
										<th scope="col">数量</th>
									</tr>
									<tr v-for="item in tableForthData.dataList">
										<td style="width: 33.3%;">{{item.oName}}</td>
										<td style="width: 33.3%;">{{item.resultC}}</td>
										<td style="width: 33.3%;">{{item.num}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-tab-pane>
	</el-tabs>
</template>
<script>
	import moment from 'moment'
	import echarts from 'echarts'
	export default {
		data: function() {
			return {
				//查询条件
				area: '',
				brand: '',
				companyId:window.localStorage.getItem("companyId"),
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				activeName: 'first',
				msg: "123",
				//页码数
				CurentPage: 1,
				CurentPagess: 1,
				CurentPagesss: 1,
				//每页的数量
				page: this.page,
				//回访月报数据
				tableData: {
					total: 0,
					dataList: []
				},
				//回访明细

				//页码数
				CurentPages: 1,
				//每页的数量
				pages: this.page,
				//分组数据
				tableDatas: {
					total: 0,
					dataList: []
				},
				tableThirdData: {
					total: 0,
					dataList: []
				},
				tableForthData: {
					total: 0,
					dataList: []
				},
				lostdirection: [],
				time: '',
				times: '',
				timethird: '',
				timeForth: '',
				Loading: false,
				reasonLoading: false,
			}
		},
		methods: {
			//状态转换
			statusCovs: function(row, column) {
				return(row.visitBack / row.visitNum * 100).toFixed(2) + "%";
			},
			//状态转换
			visitMonth: function(row, column) {
				return(row.visitBackInTwo / row.visitNum * 100).toFixed(2) + "%";
			},
			handleClick: function(tab, event) {
				console.log(tab, event);
			},
			//在外面保养的原因 横向合计
			forthRowSum: function(row, column) {
				var sum = 0;
				for(var key in row) {
					if(key != 'lostReason'&&key != 'oName'&&key != 'companyId') {
						//						console.log(row[key]);
						sum = sum + row[key];
					}
				}
				return sum;
			},
			//流失客户未进站原因分析 横向合计
			thirdRowSum: function(row, column) {
				console.log(JSON.stringify(row));
				debugger;
				var sum = 0;
				for(var key in row) {
					if(key != 'typePcode') {
						if(key != 'companyId'&&key != 'oName'&&key != 'typeCode' && key != 'wxxl' && key != 'fwhj' && key != 'lcy' && key != 'qt' && key != 'wxzl' && key != 'wxjg' && key != 'qdc' && key != 'fwtd') {
							console.log(row[key]);
							sum = sum + row[key];
						}

					}
				}
				console.log('sum:' + sum);
				return sum;
			},
			//查询
			baseQuery: function() {
				var dates;
				if(this.$data.time == '') {
					this.$data.time = this.moment(new Date()).format("YYYY-MM");
					dates = this.$data.time;
				} else {
					dates = this.moment(this.$data.time).format("YYYY-MM");
				}
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司！")
				} else {
					//debugger;
					this.$http.post(this.API_ROOT + '/crm/kpi/lsVisit', this.$data.condition, {
							params: {
								mDate: dates,
								companyId: this.$data.companyId,
								area: this.$data.area,
								brand: this.$data.brand,
															start: this.$data.CurentPage,
															limit: this.page.pageSize
							}
						})
						.then(resp => {
							if(resp.data.success) {
								resp.data.total = parseInt(resp.data.total);
								// es5写法
								this.$data.tableData = resp.data;
								//this.baseQuery(this.$data.curTreeDeptId);
								//this.$data.exFormShow = false;
							} else {
								//debugger;
								this.$message.error(resp.data.msg);
							}
						}, resp => {});
				}
			},
			//查询详情
			baseQuerys: function() {
				debugger;
				var dates;
				if(this.$data.times == '') {
					this.$data.times = this.moment(new Date()).format("YYYY-MM");
					dates = this.$data.times;
				} else {
					dates = this.moment(this.$data.times).format("YYYY-MM");
				}
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司！")
				} else {
					this.$data.Loading = true;
					//debugger;
					this.$http.get(this.API_ROOT + '/crm/statistics/loss/lossPlace', {
							params: {
								time: dates,
								companyId: this.$data.companyId,
								area: this.$data.area,
								brand: this.$data.brand,
//								start: this.$data.CurentPage,
//								limit: this.page.pageSize
							}
						})
						.then(resp => {
							debugger;
							if(resp.data.success) {
								this.$data.tableDatas.dataList = resp.data.data;
								//this.baseQuery(this.$data.curTreeDeptId);
								//this.$data.exFormShow = false;
							} else {
								//debugger;
								this.$message.error(resp.data.msg);
							}
							this.$data.Loading = false;
						}, resp => {});
				}

			},
			//流失客户未进站原因分析查询
			baseSecondQuery: function() {
				var dates;
				if(this.$data.timethird == '') {
					this.$data.timethird = this.moment(new Date()).format("YYYY-MM");

					dates = this.$data.timethird;
				} else {
					dates = this.moment(this.$data.timethird).format("YYYY-MM");
				}
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司！")
				} else {
					//this.lostDirection();
					this.$data.Loading = true;
					this.$http.get(this.API_ROOT + '/crm/statistics/loss/notInStore', {
							params: {
								time: dates,
								companyId: this.$data.companyId,
								area: this.$data.area,
								brand: this.$data.brand,
//								start: this.$data.CurentPagess,
//								limit: this.page.pageSize
							}
						})
						.then(resp => {
							//debugger;
							if(resp.data.success) {
								resp.data.total = parseInt(resp.data.total);
								this.$data.tableThirdData.total = resp.data.total;
								this.$data.tableThirdData.dataList = resp.data.dataList;
								
								if(this.$data.tableThirdData.dataList.length>0){
									for(var i = 0 ; i < this.$data.tableThirdData.dataList.length -1 ; i++){
										this.$data.tableThirdData.dataList[i].typeCode = this.$data.tableThirdData.dataList[i].typeCode + "个月流失";
									}
								}
							} else {
								//debugger;
								this.$message.error(resp.data.msg);
							}
							this.$data.Loading = false;
						}, resp => {});
				}
			},
			//在外面保养的原因查询
			baseForthQuery: function() {
				var dates;
				if(this.$data.timeForth == '') {
					this.$data.timeForth = this.moment(new Date()).format("YYYY-MM");
					dates = this.$data.timeForth;
				} else {
					dates = this.moment(this.$data.timeForth).format("YYYY-MM");
				}
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司！")
				} else {
					this.lostDirection();
					this.$data.reasonLoading = true;
					//debugger;
					this.$http.get(this.API_ROOT + '/crm/statistics/loss/outsideMaintenance', {
							params: {
								time: dates,
								companyId: this.$data.companyId,
								area: this.$data.area,
								brand: this.$data.brand,
//								start: this.$data.CurentPagesss,
//								limit: this.page.pageSize
								
							}
						})
						.then(resp => {
							debugger;
							if(resp.data.success) {
								resp.data.total = parseInt(resp.data.total);
								this.$data.tableForthData.total = resp.data.total;
								this.$data.tableForthData.dataList = resp.data.data;
							} else {
								//debugger;
								this.$message.error(resp.data.msg);
							}
							this.$data.reasonLoading = false;
						}, resp => {});
				}
			},

			//流失方向查询
			lostDirection: function() {
				this.$http.get(this.API_ROOT + '/crm/loss/lossList', {
						params: {
							typeCode: 2,
							companyId:this.$data.companyId
						}
					})
					.then(resp => {
						debugger;
						if(resp.data.success) {
							// es5写法
							this.$data.lostdirection = resp.data.data;
						} else {
							//debugger;
							this.$message.error(resp.data.msg);
						}
					}, resp => {});
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.baseQuerys();
			},
			handleCurrentChangess: function(currentPage) {
				this.$data.CurentPagess = currentPage;
				//this.$data.dictGroup = '';
				this.baseSecondQuery();
			},
			handleCurrentChangesss: function(currentPage) {
				this.$data.CurentPagesss = currentPage;
				//this.$data.dictGroup = '';
				this.baseForthQuery();
			},
			//列表,当前页切换
			handleCurrentChanges: function(currentPage) {
				debugger;
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.baseQuerys();
			},
			//状态转换
			statusCov: function(row, column) {
				return row.newRemind == "0" ? '已预约' : '未预约';
			},
			//时间转换
			buyDates: function(row, column) {
				if(row.recordLength == "" || row.recordLength == null) return "";
				return moment(Number(row.recordLength)).format("YYYY-MM-DD");
			},
			//获取公司信息

	
		},
		//表单创建时执行
		created: function() {
			//		this.baseQuery();
		
			//		this.baseSecondQuery();
			//		this.baseForthQuery();
		}
	}
</script>
<style>

</style>